{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Ihre Entscheidung{% endblock %}

{% block content %}



<style>
    .div1 {
        width: 1000px;
        padding: 20px;
        background-color: aliceblue;
    }

    .div2 {
        width: 1000px;
        padding: 20px;
        height: 25px;
    }

    h1 {
        font-size: 150%;
        margin-bottom: 20px
    }

    .tab { margin-left: 50px; }

</style>
 <p> Im Folgenden sehen Sie wie sich das Vermögen aller Spieler in ihrer Gruppe nach der nächsten Einkommensrunde zusammensetzen wird, wenn es keine Umverteilung gibt. </p>

{% if player.treatment == "Absolute" %}
 <div class="div1">
     <h1>Vermögensverteilung ohne Umverteilung</h1>
     <p>Das Vermögen jedes Spielenden ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">+ Einkommen</span>.</p>

     <p> Spieler 1: {{ player.p1_final_wealth_no_redist}} =  {{player.p1_initial_wealth }}<span style="color:blue;"> + {{player.p1_income_no_redist}}</span></p>
     <p> Spieler 2: {{ player.p2_final_wealth_no_redist}} =  {{player.p2_initial_wealth }}<span style="color:blue;"> + {{player.p2_income_no_redist}}</span></p>
     <p> Spieler 3: {{ player.p3_final_wealth_no_redist}} =  {{player.p3_initial_wealth }}<span style="color:blue;"> + {{player.p3_income_no_redist}}</span></p>


 </div>
 {%endif%}

 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Vermögensverteilung ohne Umverteilung</h1>
      <p>Das Vermögen jedes Spielenden ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">x Wachstumsfaktor</span>.</p>

      <p> Spieler 1: {{ player.p1_final_wealth_no_redist}} =  {{player.p1_initial_wealth }}<span style="color:blue;"> x {{player.p1_factor_no_redist}}</span></p>
      <p> Spieler 2: {{ player.p2_final_wealth_no_redist}} =  {{player.p2_initial_wealth }}<span style="color:blue;"> x {{player.p2_factor_no_redist}}</span></p>
      <p> Spieler 3: {{ player.p3_final_wealth_no_redist}} =  {{player.p3_initial_wealth }}<span style="color:blue;"> x {{player.p3_factor_no_redist}}</span></p>


  </div>
  {%endif%}



 <p> Sie können nun eine Umverteilungsrate auswählen. Diese verändert das Einkommen und somit das neue Vermögen der Spielenden. </p>

{% if player.treatment == "Absolute" %}
 <div class="div1">
     <h1>Vermögensverteilung bei gewählter Umverteilung</h1>
     <p> Bitte nutzen Sie den Slider, um eine Umverteilungsrate auszuwählen. </p>
     <p id="redist_choice_feedback"><br></p>
     <p>  <input type="range" name="redist_choice" value="0" step="0.1" style="width:400px" min="0" max="100" id="redist_choice" class="form-control"> </p>


     <p>Das Vermögen jedes Spielenden ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">+ Einkommen</span>.</p>

     <p> Spieler 1: <span id="p1_live_final_wealth"></span> € =  {{player.p1_initial_wealth }}<span style="color:blue;"> + <span id="p1_live_income"></span> €</span></p>
     <p> Spieler 2: <span id="p2_live_final_wealth"></span> € =  {{player.p2_initial_wealth }}<span style="color:blue;"> + <span id="p2_live_income"></span> €</span></p>
     <p> Spieler 3: <span id="p3_live_final_wealth"></span> € =  {{player.p3_initial_wealth }}<span style="color:blue;"> + <span id="p3_live_income"></span> €</span></p>

     <script>
         var p1_initial_wealth = {{ p1_initial_wealth }};
         var p2_initial_wealth = {{ p2_initial_wealth }};
         var p3_initial_wealth = {{ p3_initial_wealth }};


         var p1_income_no_redist = {{ p1_income_no_redist }};
         var p2_income_no_redist = {{ p2_income_no_redist }};
         var p3_income_no_redist = {{ p3_income_no_redist }};

         var p1_final_wealth_no_redist = p1_initial_wealth + p1_income_no_redist;
         var p2_final_wealth_no_redist = p2_initial_wealth + p2_income_no_redist;
         var p3_final_wealth_no_redist = p3_initial_wealth + p3_income_no_redist;

         var avg_income = (p1_income_no_redist + p2_income_no_redist + p3_income_no_redist)/3;


         var p1_live_income = p1_income_no_redist;
         var p2_live_income = p2_income_no_redist;
         var p3_live_income = p3_income_no_redist;







      	$(document).ready(function () {

            document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);
            document.getElementById("p3_live_final_wealth").innerHTML = p3_final_wealth_no_redist.toFixed(2);

            document.getElementById("p1_live_income").innerHTML = p1_income_no_redist.toFixed(2);
            document.getElementById("p2_live_income").innerHTML = p2_income_no_redist.toFixed(2);
            document.getElementById("p3_live_income").innerHTML = p3_income_no_redist.toFixed(2);

            document.getElementById("redist_choice_feedback").innerHTML = "Ihre gewählte Umverteilungsrate beträgt 0%.";


          	$("input[name=redist_choice]").on('input', function() {

              	document.getElementById("redist_choice_feedback").innerHTML = `Ihre gewählte Umverteilungsrate beträgt `+$(this).val()+'%.';

                p1_live_income = p1_income_no_redist-(p1_income_no_redist-avg_income)*$(this).val()/100;
                p2_live_income = p2_income_no_redist-(p2_income_no_redist-avg_income)*$(this).val()/100;
                p3_live_income = p3_income_no_redist-(p3_income_no_redist-avg_income)*$(this).val()/100;

                p1_live_final_wealth = p1_initial_wealth + p1_live_income;
                p2_live_final_wealth = p2_initial_wealth + p2_live_income;
                p3_live_final_wealth = p3_initial_wealth + p3_live_income;

                document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
                document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);
                document.getElementById("p3_live_final_wealth").innerHTML = p3_live_final_wealth.toFixed(2);

                document.getElementById("p1_live_income").innerHTML = p1_live_income.toFixed(2);
                document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);
                document.getElementById("p3_live_income").innerHTML = p3_live_income.toFixed(2);




             });
          });

     </script>
 </div>
 {%endif%}

 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Vermögensverteilung bei gewählter Umverteilung</h1>
      <p> Bitte nutzen Sie den Slider, um eine Umverteilungsrate auszuwählen. </p>
      <p id="redist_choice_feedback"><br></p>
      <p>  <input type="range" name="redist_choice" value="0" step="0.1" style="width:400px" min="0" max="100" id="redist_choice" class="form-control"> </p>


      <p>Das Vermögen jedes Spielenden ist dargestellt als Neues Vermögen = Altes Vermögen <span style="color:blue;">x Wachstumsfaktor</span>.</p>

      <p> Spieler 1: <span id="p1_live_final_wealth"></span> € =  {{player.p1_initial_wealth }}<span style="color:blue;"> x <span id="p1_live_factor"></span></span></p>
      <p> Spieler 2: <span id="p2_live_final_wealth"></span> € =  {{player.p2_initial_wealth }}<span style="color:blue;"> x <span id="p2_live_factor"></span></span></p>
      <p> Spieler 3: <span id="p3_live_final_wealth"></span> € =  {{player.p3_initial_wealth }}<span style="color:blue;"> x <span id="p3_live_factor"></span></span></p>

      <script>
          var p1_initial_wealth = {{ p1_initial_wealth }};
          var p2_initial_wealth = {{ p2_initial_wealth }};
          var p3_initial_wealth = {{ p3_initial_wealth }};


          var p1_income_no_redist = {{ p1_income_no_redist }};
          var p2_income_no_redist = {{ p2_income_no_redist }};
          var p3_income_no_redist = {{ p3_income_no_redist }};

          var p1_final_wealth_no_redist = p1_initial_wealth + p1_income_no_redist;
          var p2_final_wealth_no_redist = p2_initial_wealth + p2_income_no_redist;
          var p3_final_wealth_no_redist = p3_initial_wealth + p3_income_no_redist;

          var avg_income = (p1_income_no_redist + p2_income_no_redist + p3_income_no_redist)/3;


          var p1_live_income = p1_income_no_redist;
          var p2_live_income = p2_income_no_redist;
          var p3_live_income = p3_income_no_redist;

          var p1_live_factor = (p1_final_wealth_no_redist / p1_initial_wealth).toFixed(2)
          var p2_live_factor = (p2_final_wealth_no_redist / p2_initial_wealth).toFixed(2)
          var p3_live_factor = (p3_final_wealth_no_redist / p3_initial_wealth).toFixed(2)







       	$(document).ready(function () {

             document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2).replace(".", ",");
             document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2).replace(".", ",");
             document.getElementById("p3_live_final_wealth").innerHTML = p3_final_wealth_no_redist.toFixed(2).replace(".", ",");

             document.getElementById("p1_live_factor").innerHTML = p1_live_factor.replace(".", ",");
             document.getElementById("p2_live_factor").innerHTML = p2_live_factor.replace(".", ",");
             document.getElementById("p3_live_factor").innerHTML = p3_live_factor.replace(".", ",");

             document.getElementById("redist_choice_feedback").innerHTML = "Ihre gewählte Umverteilungsrate beträgt 0%.";


           	$("input[name=redist_choice]").on('input', function() {

               	document.getElementById("redist_choice_feedback").innerHTML = `Ihre gewählte Umverteilungsrate beträgt `+$(this).val()+'%.';

                 p1_live_income = p1_income_no_redist-(p1_income_no_redist-avg_income)*$(this).val()/100;
                 p2_live_income = p2_income_no_redist-(p2_income_no_redist-avg_income)*$(this).val()/100;
                 p3_live_income = p3_income_no_redist-(p3_income_no_redist-avg_income)*$(this).val()/100;

                 p1_live_final_wealth = p1_initial_wealth + p1_live_income;
                 p2_live_final_wealth = p2_initial_wealth + p2_live_income;
                 p3_live_final_wealth = p3_initial_wealth + p3_live_income;

                 p1_live_factor = (p1_live_final_wealth / p1_initial_wealth)
                 p2_live_factor = (p2_live_final_wealth / p2_initial_wealth)
                 p3_live_factor = (p3_live_final_wealth / p3_initial_wealth)

                 document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
                 document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);
                 document.getElementById("p3_live_final_wealth").innerHTML = p3_live_final_wealth.toFixed(2);

                 document.getElementById("p1_live_factor").innerHTML = p1_live_factor.toFixed(2);
                 document.getElementById("p2_live_factor").innerHTML = p2_live_factor.toFixed(2);
                 document.getElementById("p3_live_factor").innerHTML = p3_live_factor.toFixed(2);




              });
           });

      </script>
  </div>
  {%endif%}





 <p></p>
{% next_button %}

{% endblock %}